<template>
  <div class="famous">
    <el-timeline style="margin-top:10px;">
      <el-timeline-item v-for="(i, index) in tableList" :key="index" :timestamp="i.createTime" placement="top">
        <div style="cursor: pointer;" @click="handleLook(index)">{{i.name}}</div>
      </el-timeline-item>
    </el-timeline>
    <el-drawer :title="directionObj.name" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <div v-html="directionObj.content" style="margin:0 20px;text-indent:2em;">
        {{directionObj.content}}
      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
        directionObj:{

        },
        tableList: []
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.$api.famous.getFamous().then(res => {
          this.tableList = res.data
          // console.log(res);
        })
      },
      handleLook(e) {
        console.log(e);
        console.log(this.tableList[e.toString()]);
        this.directionObj = this.tableList[e.toString()]
        this.drawer = true
        
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }

</script>

<style lang="scss" scoped>
  .famous {

    width: 800px;
    padding: 0 20px;
    height: 100%;

    // margin-top: 50px;
    li {
      height: 40px;
      line-height: 30px;

    }
  }

</style>
